<template>
  <div class="float-window" :style="windowStyle" @mousedown="bringToFront" v-show="visible">
    <div class="window-header" @mousedown.prevent="startDrag">
      <div class="float-title-container">
        <span class="float-title">{{ title }}</span>
        <slot name="titleIcon" />
      </div>
      <div class="header-actions">
        <i class="el-icon-check el-sure-btn" v-if="showConfirmIcon" @click="handleConfirm" />
        <i class="el-icon-close" @click="handleClose" />
      </div>
    </div>
    <div class="window-body">
      <slot />
    </div>
  </div>
</template>

<script>
let globalZIndex = 3000;

export default {
  name: 'FloatWindow',
  model: {
    prop: 'visible',
    event: 'input',
  },
  props: {
    initialZIndex: {
      type: Number,
      default: void 0,
    },
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    top: {
      type: String,
      default: '10%',
    },
    width: {
      type: String,
      default: '400px',
    },
    modal: {
      type: Boolean,
      default: false,
    },
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    showConfirmIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    const startZIndex = this.initialZIndex != null ? this.initialZIndex : globalZIndex++;
    return {
      zIndex: startZIndex,
      dragging: false,
      position: { left: 300 },
      dragOffset: { x: 0, y: 0 },
      hasCentered: false,
    };
  },
  computed: {
    computedZIndex() {
      return this.initialZIndex != null ? this.initialZIndex : this.zIndex;
    },
    windowStyle() {
      return {
        position: 'fixed',
        top: this.top,
        left: this.position.left + 'px',
        width: this.width,
        zIndex: this.computedZIndex,
      };
    },
  },
  watch: {
    visible(val) {
      if (val && !this.hasCentered) {
        this.$nextTick(() => {
          const windowEl = this.$el;
          const windowWidth = windowEl.offsetWidth;
          const screenWidth = window.innerWidth;
          this.position.left = (screenWidth - windowWidth) / 2;
          this.hasCentered = true;
        });
      }
    },
  },
  methods: {
    bringToFront() {
      this.zIndex = ++globalZIndex;
    },
    startDrag(e) {
      this.dragging = true;
      const rect = this.$el.getBoundingClientRect();
      this.dragOffset.x = e.clientX - rect.left;
      this.dragOffset.y = e.clientY - rect.top;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(e) {
      if (!this.dragging) return;
      this.position.left = e.clientX - this.dragOffset.x;
      this.$el.style.top = e.clientY - this.dragOffset.y + 'px';
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    handleClose() {
      this.$emit('close');
    },
    handleConfirm() {
      this.$emit('confirm');
    },
    handleCustomAlarm(){
      this.$emit('alarm');
    },
  },
};
</script>

<style scoped>
.float-window {
  background: #252526;
  border: 1px solid #3A3A3C;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  color: #ece6e6;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(90, 90, 92, 0.5);
}

.window-header {
  background: #2d2d30;
  padding: 10px;
  cursor: move;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3c3c3c;
  color: #ece6e6;
  font-size: 14px;
}

.window-body {
  max-height: 500px;
  color: #ece6e6;
  background-color: #1e1e1e;
  overflow: hidden;
}

.float-title {
  color: #fbfbfb;
  font-size: 11px;
  font-weight: 300;
}

.el-sure-btn {
  color: #1b75c9 !important;
  margin-right: 6px !important;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.header-actions i {
  cursor: pointer;
  font-size: 16px;
  color: #ece6e6;
}

.float-window ::v-deep .el-form-item__label {
  color: #1b75c9;
  font-size: 14px;
  font-weight: bold;
}

.float-window ::v-deep .el-dialog__title {
  color: #ece6e6;
}

.float-window ::v-deep .no-border-input .el-input__inner {
  border: none;
  box-shadow: none;
  background-color: transparent;
  color: #ece6e6;
}

.float-title-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.float-title-container ::v-deep img {
  margin-left: 10px;
  height: 16px;
  cursor: pointer;
}

/* 自定义浏览器样式 */
/* .window-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.window-body::-webkit-scrollbar-track {
  background: #2d2d30;
  border-radius: 3px;
}

.window-body::-webkit-scrollbar-thumb {
  background-color: #1b75c9;
  border-radius: 3px;
  border: 1px solid #2d2d30;
}

.window-body::-webkit-scrollbar-thumb:hover {
  background-color: #3399ff;
} */
</style>
